<template>
  <div class="shopcart">
    <!-- 头部 -->
    <div class="top">
      <div class="top-one" @click="backBtn">
        <img src="../images/leftjiantou.png" alt="" />
      </div>
      <div class="title">购物车</div>
      <div class="detaile-top-right" @click.stop="seen = !seen">
        <div>
          <img :src="moreSrc" alt="" />
        </div>
      </div>
      <div class="detaileNav" v-if="seen">
        <div class="detaileNav-div">
          <div>
            <img class="detaileNav-img" src="../images/shouye.png" alt="" />
          </div>
          <p class="detaileNav-title" @click="btnClick('/')">首页</p>
        </div>
        <div class="detaileNav-div">
          <div>
            <img class="detaileNav-img" src="../images/fenlei.png" alt="" />
          </div>
          <p class="detaileNav-title" @click="btnClick('/classify')">
            分类搜索
          </p>
        </div>
        <div class="detaileNav-div">
          <div>
            <img class="detaileNav-img" src="../images/gouwuche.png" alt="" />
          </div>
          <p class="detaileNav-title" @click="btnClick('/shopcart')">购物车</p>
        </div>
        <div class="detaileNav-div">
          <div>
            <img class="detaileNav-img" src="../images/wode.png" alt="" />
          </div>
          <p class="detaileNav-title" @click="btnClick('/mepage')">我的火火</p>
        </div>

        <div class="detaileNav-div">
          <div>
            <img class="detaileNav-img" src="../images/zuji.png" alt="" />
          </div>
          <p class="detaileNav-title">浏览记录</p>
        </div>
      </div>
    </div>

    <!-- 中间 地址栏 有商品就显示-->
    <div class="toububox" v-if="havegoods">
      <div v-if="bianji" @click="bianji = !bianji" class="toububox-bottom">
        <div class="wancheng">完成</div>
      </div>
      <div class="toububox-bottom" v-if="!bianji">
        <div class="toububox-bottom-z">
          <a href="#">
            <img src="../images/dingwei.png" alt="" />
            <div class="inputbox">
              <input
                v-model="fieldValue"
                placeholder="北京/北京市/东城区"
                @click="show = true"
              />
            </div>

            <van-popup v-model="show" round position="bottom">
              <van-cascader
                v-model="cascaderValue"
                title="请选择所在地区"
                :options="options"
                @close="show = false"
                @finish="onFinish"
              />
            </van-popup>
          </a>
        </div>

        <div class="toububox-bottom-y">
          <span></span>
          <p @click="bianjishangping">编辑商品</p>
        </div>
      </div>
    </div>
    <!-- 去登录 登录完隐藏 -->
    <div class="shopcart-main" v-if="!denglu">
      登录后可同步账户购物车中的商品
      <div class="shopcart-main-button" @click="qudenglu">登录</div>
    </div>

    <!-- 背景图区 有商品自动隐藏 -->
    <div class="shopcart-main-denglu" v-if="!havegoods">
      <div class="shopcart-main-denglu-img"></div>
      <p class="shopcart-main-denglu-txt">{{ tips }}</p>
      <!---->
    </div>
    <!-- 秒杀 -->
    <div class="shopcart_mod_title" v-if="!havegoods">
      <span class="shopcart_mod_title_text">火火秒杀</span>
    </div>
    <div class="kill" v-if="!havegoods">
      <div
        class="kill-top"
        @click="
          btnClickA('https://wqs.jd.com/portal/wx/seckill_m/index.shtml?st=1')
        "
      >
        <p class="p-miaosha">火火秒杀</p>
        <span class="span-hours">{{ time }}点场</span>
        <div class="timer">
          <span ref="hours">{{ hours }}</span>
          <span>:</span>
          <span ref="minutes">{{ minutes }}</span>
          <span>:</span>
          <span ref="seconds">{{ seconds }}</span>
        </div>
        <!-- <p class="p-genduo">更多秒杀</p> -->
        <img class="img-genduo" src="../images/youjiantou.png" alt="" />
      </div>
      <ul class="kill-content">
        <li
          class="kill-li"
          v-for="item in KillItems"
          :key="item.id"
          @click="btnClickA(item.url)"
        >
          <img class="kill-img" :src="item.img" alt="" />
          <p class="kill-pNew">{{ item.priceNew }}</p>
          <p class="kill-pOld">{{ item.priceOld }}</p>
        </li>
        <div class="div-quanbutop">
          <div
            class="div-quanbu"
            @click="
              btnClickA(
                'https://wqs.jd.com/portal/wx/seckill_m/index.shtml?st=1'
              )
            "
          >
            <span class="span-quanbu">查看更多</span>
            <img
              class="span-quanbu-img"
              src="../images/youjiantou.png"
              alt=""
            />
          </div>
        </div>
      </ul>
    </div>

    <!-- 切换区2 有商品自动显示 -->
    <div class="goodsbox" v-if="havegoods">
      <div class="goodsbox-one">
        <div class="goodsbox-one-top">
          <van-checkbox
            v-model="checked"
            checked-color="#ee0a24"
            @click="toggleAll"
            @change="panduanquanxuan"
          ></van-checkbox>
          <div class="goodsbox-one-top-title">HH 火火自营</div>
        </div>
        <van-checkbox-group
          v-model="result"
          ref="checkboxGroup"
          checked-color="#ee0a24"
        >
          <div
            class="goodsbox-one-body"
            v-for="(item, index) in goodslist"
            :key="item.name"
          >
            <van-checkbox
              :name="index"
              checked="checked"
              :label="item"
            ></van-checkbox>
            <div class="goodsbox-one-body-main">
              <img :src="item.img" alt="" />
              <div class="goodsbox-one-body-main-content">
                <div class="goodsbox-one-body-main-content-msg">
                  {{ item.msg }}
                </div>
                <div class="goodsbox-one-body-main-content-name">
                  {{ item.name }}
                </div>
                <div class="price_line">
                  <div class="price">￥{{ item.price }}</div>
                  <div
                    class="jian"
                    :class="{ zhihui: item.num == 1 }"
                    @click="selectDowm(index, item.num)"
                  >
                    -
                  </div>
                  <input class="num" v-model="item.num" />
                  <div class="jia" @click="add(index)">+</div>
                </div>
                <div
                  class="shanchu"
                  @click="
                    show5 = true;
                    flag(index);
                  "
                >
                  删除
                </div>
                <van-overlay :show="show5">
                  <div class="wrapper" @click.stop>
                    <div class="block" />
                    <div class="block-one"></div>
                    <div class="block-two">确认要删除此商品？</div>
                    <div class="block-three">
                      <button class="block-three-one" @click="show5 = false">
                        取消
                      </button>
                      <button class="block-three-two" @click="shanchu()">
                        删除
                      </button>
                    </div>
                  </div>
                </van-overlay>
              </div>
            </div>
          </div>
        </van-checkbox-group>
      </div>
    </div>
    <!-- 去结算 -->
    <div class="jiesuanbox" v-if="havegoods">
      <van-checkbox
        v-model="checked"
        checked-color="#ee0a24"
        @click="toggleAll"
        @change="panduanquanxuan"
      ></van-checkbox>

      <div class="jiesuanbox-quanxuan">全选</div>
      <button v-if="bianji" class="quanshan" @click="quanshan">删除</button>
      <div class="jiesuanbox-box" v-if="!bianji">
        <div class="jiesuanbox-zongji">总计:</div>
        <div class="jiesuanbox-zongjia">￥{{ zongjia }}</div>
      </div>
      <button
        class="jiesuanbox-button"
        :class="{ active2: isactive }"
        v-if="!bianji"
      >
        去结算({{ zongshu }}件)
      </button>
    </div>
    <!-- 楼层区 -->
    <div class="shopcart_mod_title">
      <span class="shopcart_mod_title_text">可能你还想要</span>
    </div>
    <div class="floor4">
      <div class="floor4-div" v-for="item in Floor4Items" :key="item.id">
        <div class="floor4-top" @click="detali(item.id)">
          <img class="floor4-img" :src="item.img" alt="" />
        </div>
        <div class="floor4-middle" @click="detali(item.id)">
          <img class="floor4-shopImg" :src="item.shopImg" alt="" />
          <span class="floor4-msg">{{ item.msg }}</span>
        </div>
        <div class="floor4-bottom">
          <div class="floor4-p">
            <p class="floor4-price">{{ item.price }}</p>
            <p class="floor4-active">{{ item.active }}</p>
          </div>

          <!-- 展示层 -->
          <van-cell
            is-link
            @click.stop="shopCartShow(item.id)"
            class="detaile-yixuan-van"
          >
            <div class="floor4img"></div>
          </van-cell>
          <!-- 弹出层 -->
          <van-popup
            v-model="shopCartUp"
            position="bottom"
            overlay-class="abcd"
            round
          >
            <div class="select-select">
              <div class="select-top">
                <div class="select-top-left">
                  <img class="select-top-img" :src="goodsImg" alt="" />
                </div>
                <div class="select-top-right">
                  <p class="select-top-price">
                    <span class="price-priceSmall">￥</span>
                    <span class="price-priceBig">{{ selectPriceBig }}</span>
                    <span class="price-priceSmall">{{ selectPriceSmall }}</span>
                  </p>
                  <p class="select-yixuan">
                    <span class="select-yixuan-one">已选</span>
                    <span class="select-yixuan-two">{{ goodName }},</span>
                    <span class="select-yixuan-three">{{ goodsNum }}个</span>
                  </p>
                  <div class="xxx">
                    <div @click="shopCartUp = !shopCartUp">
                      <img src="../images/x.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="select-top-middle">
                <p class="select-leibie">类别</p>
                <p
                  class="select-goodname"
                  v-for="(item, index) in obj.goodsChange"
                  :class="{ activeClass: borderType3 == index }"
                  :key="item.id"
                  @click="seleceGood(index)"
                >
                  {{ item.name }}
                </p>
              </div>
              <div class="select-add">
                <p class="select-shuliang">数量</p>
                <p class="select-change">
                  <span
                    class="select-down"
                    :style="{ color: colorClick }"
                    @click="selectDowm1()"
                    >-</span
                  >
                  <span class="select-num">{{ goodsNum }}</span>
                  <span class="select-up" @click="selectUp1()">+</span>
                </p>
              </div>
              <div class="select-bottom">
                <div class="select-bottom-add" @click="ShopCart()">
                  加入购物车
                </div>
                <div class="select-bottom-shop">立即购买</div>
              </div>
            </div>
          </van-popup>
        </div>
      </div>
    </div>
    <!-- 返回顶部 -->
    <a href="#" class="backTop" :style="{ zIndex: backTop }">
      <img src="../images/backTop.png" alt="" />
    </a>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "./Footer.vue";

export default {
  components: {
    Footer,
    //  City
  },
  data() {
    return {
      bianji: false,
      index1: 0,
      show5: false,
      isactive: "",
      checked: false,
      result: [],
      zIndex: "",
      backTop: false,
      color: "#5e31c4",
      moreSrc: "./images/more.png",
      Floor4Items: [],
      seen: false,
      KillItems: [],
      time: "",
      hours: "",
      minutes: "",
      seconds: "",
      show: false,
      fieldValue: "",
      cascaderValue: "",
      havegoods: false,
      tips: "登录后可同步购物车中商品",
      quanxuan: true,
      zongshu: 0,
      zongjia: 0,
      shopCartNum: 0,
      // 选项列表，children 代表子选项，支持多级嵌套
      zhihui: false,
      options: [],
      chuzhilist: [],
      obj: {},
      shopCartUp: false,
      selectPriceBig: "",
      selectPriceSmall: "",
      goodName: "",
      goodsImg: "",
      goodsNum: 1,
      goodId: "",
      goodId2: "",
      borderType3: 0,
      colorClick: "#262626",
      index9: 0,
    };
  },
  watch: {
    goodId2(newval) {
      let that = this;
      let url = "./data/index.json";
      this.axios.get(url).then(function (response) {
        that.options = response.data.Options;
        that.KillItems = response.data.Home.kill;
        that.Floor4Items = response.data.Home.floor4;
        let arr = response.data.Detaile;
        arr.forEach(function (node) {
          if (node.index == newval) {
            that.obj = node;
            that.selectPriceBig = node.goodsChange[0].priceBig;
            that.selectPriceSmall = node.goodsChange[0].priceSmall;
            that.goodName = node.goodsChange[0].name;
            that.goodsImg = node.goodsChange[0].img;
          }
        });
      });
    },
    denglu(newval) {
      if (newval == true) {
        this.tips = "购物车空空如也，去逛逛吧~";
      }
    },
    goodslist(newval) {
      localStorage.setItem("arr", JSON.stringify(newval));
      if (this.result.length == this.goodslist.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      if (newval.length > 0) {
        this.havegoods = true;
      } else {
        this.havegoods = false;
      }
      this.shuaxin();
    },
    goodsnum() {
      localStorage.setItem("arr", JSON.stringify(this.goodslist));
      this.shuaxin();
      if (this.result.length == this.goodslist.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },

    result() {
      this.shuaxin();
      if (this.result.length == this.goodslist.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      if (this.result.length > 0) {
        this.isactive = true;
        if (this.result.length > this.goodslist.length) {
          this.result.length -= this.result.length - this.goodslist.length;
        }
      }
    },
  },

  methods: {
    quanshan(){
       if(this.result.length>0){
         this.result.sort(function (a,b) {
           return b-a;
         })
       this.$store.commit("remove",this.result[0])
         this.result.splice(0,1)
          this.quanshan()           
       }
    },
    bianjishangping() {
      this.bianji = true;
    },
    flag(index) {
      this.index9 = index;
    },
    shuaxin() {
      this.zongshu = 0;
      this.zongjia = 0;
      for (
        let index = 0;
        index < this.result.length && index < this.goodslist.length;
        index++
      ) {
        var a = this.result[index];
        if (this.goodslist[a].num > 0) {
          this.zongshu += Number(this.goodslist[a].num);
        }
        this.zongjia += this.goodslist[a].num * this.goodslist[a].price;
      }
      this.zongjia = this.zongjia.toFixed(2);
    },
    shanchu() {
      this.$store.commit("remove", this.index9);
      if (this.result.includes(this.index9)) {
        this.result.pop();
      }
      if (this.result.length == this.goodslist.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      this.show5 = false;
    },
    backBtn() {
      this.$router.go(-1);
    },
    panduanquanxuan() {
      if (this.checked == true) {
        this.$refs.checkboxGroup.toggleAll(true);
      }
    },
    selectDowm(index, num) {
      if (num > 1) {
        this.$store.commit("minus", index);
      }
      this.shuaxin();
    },
    add(index) {
      this.$store.commit("add", index);
      this.shuaxin();
    },
    toggleAll() {
      if (this.result.length < this.goodslist.length) {
        this.$refs.checkboxGroup.toggleAll(true);
        this.quanxuan = true;
      } else {
        this.$refs.checkboxGroup.toggleAll(this.quanxuan);
        this.quanxuan = !this.quanxuan;
      }
    },
    qudenglu() {
      this.$router.push({
        path: "/register",
      });
    },
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },

    btnClick(hash) {
      this.$router.push({
        path: hash,
      });
    },
    btnClickA(url) {
      window.location.href = url;
    },
    detali(id) {
      this.$router.push({
        path: "/detaile",
        query: {
          id: id,
        },
      });
    },
    shopCartShow(id) {
      this.shopCartUp = true;
      this.goodId2 = id;
    },
    seleceGood(index) {
      this.selectPriceBig = this.obj.goodsChange[index].priceBig;
      this.selectPriceSmall = this.obj.goodsChange[index].priceSmall;
      this.goodName = this.obj.goodsChange[index].name;
      this.goodsImg = this.obj.goodsChange[index].img;
      this.borderType3 = index;
      this.goodId = this.obj.goodsChange[index].id;
    },
    selectDowm1() {
      this.goodsNum -= 1;
      this.colorClick = "#262626";
      if (this.goodsNum <= 1) {
        this.goodsNum = 1;
        this.colorClick = "#f2f2f2";
      }
    },
    selectUp1() {
      this.goodsNum += 1;
      this.colorClick = "#262626";
    },
    ShopCart() {
      let name = this.goodName;
      let num = Number(this.goodsNum);
      let priceOne = Number.parseFloat(
        this.selectPriceBig.concat(this.selectPriceSmall)
      );
      let img = this.goodsImg;
      let msg = this.obj.goodName;
      let id = this.goodId;
      this.$store.commit("detail", {
        name: name,
        num: num,
        price: priceOne,
        img: img,
        msg: msg,
        id: id,
      });
      this.shopCartUp = false;
    },
  },
  created() {
    window.parent.scrollTo(0, 0);
    this.hash = this.$route.path;
    let that = this;

    let year = new Date().getFullYear();
    let month = new Date().getMonth();
    let data = new Date().getDate();
    let hour = new Date().getHours();
    let a = new Date(year, month, data, hour + 1, 0, 0).getTime();

    setInterval(() => {
      let b = new Date().getTime();
      let time = new Date().getHours();
      let hours = (a - b) / 1000 / 60 / 60;
      let h = parseInt(hours);
      let minutes = (a - b - h * 60 * 60 * 1000) / 1000 / 60;
      let m = parseInt(minutes);
      let seconds = (a - b - h * 60 * 60 * 1000 - m * 60 * 1000) / 1000;
      let s = parseInt(seconds);
      if (h <= 9) {
        that.hours = "0" + h;
      } else {
        that.hours = h;
      }
      if (m <= 9) {
        that.minutes = "0" + m;
      } else {
        that.minutes = m;
      }
      if (s <= 9) {
        that.seconds = "0" + s;
      } else {
        that.seconds = s;
      }
      that.time = time;
    }, 1000);

    let url = "./data/index.json";
    this.axios.get(url).then(function (response) {
      that.options = response.data.Options;
      that.KillItems = response.data.Home.kill;
      that.Floor4Items = response.data.Home.floor4;
    });
  },

  computed: {
    denglu() {
      return this.$store.state.denglu;
    },
    goodslist() {
      return this.$store.state.detailArr;
    },

    goodsnum() {
      var a = [];

      this.goodslist.forEach((element) => {
        a.push(element.num);
      });
      return a;
    },
  },
  mounted() {
    let that = this;
    document.addEventListener("click", function () {
      that.seen = false;
    });
    window.addEventListener("scroll", function (e) {
      let top = e.target.scrollingElement.scrollTop;
      if (top > 0) {
        that.zIndex = 1;
        that.color = "#E43130";
        if (top > 500) {
          that.backTop = 999;
        } else {
          that.backTop = -1;
        }
      } else {
        that.zIndex = 999;
        that.color = "#5e31c4";
        that.backTop = -1;
      }
    });
    if (this.goodslist.length > 0) {
      this.havegoods = true;
    } else {
      this.havegoods = false;
    }
  },
};
</script>
<style scoped>
.quanshan {
  width: 3.5625rem;
  height: 1.875rem;
  border: .0625rem solid #8c8c8c;
  line-height: 1.875rem;
  text-align: center;
  font-size: .75rem;
  border-radius: .9375rem;
  background: hsla(0, 0%, 100%, 0);
  margin-left: 11.25rem;
  margin-top: .625rem;
}
.wancheng {
  font-size: .75rem;
  color: #262626;
  line-height: 2.625rem;
  width: 1.5rem;
  margin-left: 15.625rem;
}
.van-overlay {
  z-index: 999;
  background: rgba(0, 0, 0, 0.3);
}
.wrapper {
  position: fixed;
  height: 10.875rem;
  top: 45%;
  left: 50%;
  margin: auto;
  box-sizing: border-box;
  width: 16.875rem;
  padding: 1.25rem 0.9375rem 0.9375rem;
  text-align: center;
  border-radius: 0.625rem;
  color: #333;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 1px 0.625rem 0 rgb(0 0 0 / 30%);
}

.block-one {
  display: block;
  width: 3.125rem;
  height: 3.125rem;
  margin: 0.3125rem auto 0.625rem;
  background-image: url(https://img12.360buyimg.com/img/s328x288_jfs/t1/147662/9/251/17727/5edf4d5aE5f3fa959/2db0f4c074a097a0.png);
  background-size: 10.25rem 9rem;
  background-repeat: no-repeat;
  background-position: -0.3125rem -0.3125rem;
}

.block-two {
  font-size: 1rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
.block-three {
  margin-top: 1.25rem;
  height: 1.875rem;
  width: 15rem;
}

.block-three-one {
  width: 7rem;
  height: 1.875rem;
  box-sizing: border-box;
  line-height: 1.875rem;
  background: #fff;
  color: #333;
  font-size: 0.875rem;
  border: 1px solid #ccc;
  box-shadow: 0 0.1875rem 0.375rem 0 rgb(0 0 0 / 5%);
  border-radius: 1.25rem;
}
.block-three-two {
  font-size: 0.875rem;
  margin-left: 0.625rem;
  height: 1.875rem;
  width: 7.125rem;
  background: #f2270c;
  color: #fff;
  border: none;
  border-radius: 1.25rem;
}
.zhihui {
  color: rgb(245, 245, 245) !important;
}
.shanchu {
  font-size: 0.625rem;
  margin-left: 8.75rem;
  margin-top: 0.625rem;
}
.jiesuanbox {
  display: flex;
  height: 3.125rem;
  line-height: 3.125rem;
  position: fixed;
  bottom: 2.8125rem;
  width: 20rem;
  background: hsla(0, 0%, 100%, 0.95);
  z-index: 900;
}
.jiesuanbox-quanxuan {
  font-size: 0.75rem;
  line-height: 3.125rem;
  text-align: center;
  width: 1.5rem;
  margin-left: -0.625rem;
  color: #262626;
}
.jiesuanbox-box {
  display: flex;
  width: 7.375rem;
  justify-content: flex-end;
}
.jiesuanbox-zongji {
  font-size: 0.8rem;
  color: #262626;
}

.jiesuanbox-zongjia {
  font-size: 0.85rem;
  color: #000000;
  line-height: 3.125rem;
  height: 3.125rem;
  width: auto;
}
.jiesuanbox-button {
  /* flex-shrink: 1; */
  margin-top: 0.375rem;
  font-weight: 700;
  position: absolute;
  right: 0.75rem;
  width: 7.0625rem;
  height: 2.375rem;
  line-height: 2.375rem;
  text-align: center;
  font-size: 0.75rem;
  border-radius: 1.25rem;
  background-color: #f2270c;
  color: #fff;
  border: none;
  opacity: 0.3;
}

.goodsbox {
  width: 20rem;
}
.goodsbox-one {
  margin-top: 0.625rem;
  padding: 0.625rem 0 1px;
  border-radius: 0.5rem;
  background: #fff;
  color: #262626;
}
.goodsbox-one-top {
  height: 1.75rem;
  line-height: 1.75rem;
  display: flex;
}
.van-checkbox {
  margin-left: 0.9375rem;
}
.goodsbox-one-top-title {
  font-size: 0.75rem;
  font-weight: 700;

  margin-left: 0.6875rem;
}
.goodsbox-one-body {
  margin-top: 0.64rem;
  margin-bottom: 0.96rem;
  display: flex;
  height: 6.734375rem;
}
.van-checkbox {
  width: 2.1875rem;
}
.goodsbox-one-body-main {
  margin-right: 0.96rem;
  margin-left: 0.375rem;
  overflow: hidden;
  display: flex;
}

.goodsbox-one-body-main img {
  width: 5.333rem;
  height: 5.333rem;
}
.goodsbox-one-body-main-content {
  font-size: 0.75rem;
  width: 10.40625rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.goodsbox-one-body-main-content-msg {
  height: 2.25rem;
  overflow: hidden;
  font-size: 0.75rem;
  color: #333;
  margin-bottom: 0.32rem;
}

.goodsbox-one-body-main-content-name {
  overflow-y: hidden;
  height: 0.835rem;
  line-height: 0.835rem;
  background: #f2f2f2;
  padding-left: 0.32rem;
  padding-right: 0.8rem;
  border-radius: 0.4rem;
}

.goodsbox-one-body-main-content-name::after {
  content: "";
  position: absolute;
  top: 3.0625rem;
  right: 0.25rem;
  margin-top: -0.1875rem;
  background: url(//wq.360buyimg.com/wxsq_trade/cart/main/images/icon_arrow_12@2x_730a6daa.png)
    no-repeat 50%;
  background-size: 0.375rem 0.375rem;
  width: 0.375rem;
  height: 0.375rem;
}

.price_line {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0.3125rem 0 0;
  justify-content: space-between;
  font-size: 0.625rem;
}
.price {
  color: #f2270c;
  font-size: 1rem;
  width: 6.875rem;
  height: 1.4375rem;
  line-height: 1.4375rem;
}
.num {
  background-color: #f2f2f2;
  width: 1.875rem;
  height: 0.8125rem;
  text-align: center;
  border: none;
}
.jia,
.jian {
  width: 0.8rem;
  height: 0.8rem;
  font-size: 0.875rem;
  line-height: 0.8rem;
}

.shopcart {
  background: #f2f2f2;
  overflow-x: hidden;
}
.top {
  height: 2.8rem;
  display: flex;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 1rem;
  text-decoration: none;
  color: #252525;
  overflow: hidden;
  border-bottom: solid 0.03125rem rgb(229, 229, 229);

  background-color: rgb(255, 255, 255);
  z-index: 999;
}
.top-one {
  width: 2.75rem;
  height: 2.75rem;
}
.title {
  height: 2.75rem;
  line-height: 2.75rem;
  font-size: 1.125rem;
  color: #333;
  width: 14.5rem;
  text-align: center;
}
.top-one img {
  margin: 0.75rem 0 0 0.75rem;
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.detaile {
  width: 100%;
  height: 100%;
}
.detaile-top {
  width: 100%;
  height: 2.75rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 999;
}
.detaile-top-left,
.detaile-top-right {
  width: 2.5rem;
  height: 2.75rem;
  display: flex;
  justify-content: center;
}
.detaile-top-left div,
.detaile-top-right div {
  width: 2rem;
  height: 2rem;
  margin: auto;
  border-radius: 50%;
  display: flex;
}
.detaile-top-left img,
.detaile-top-right img {
  width: 1.25rem;
  height: 1.25rem;
  margin: auto;
  margin: auto;
}
.detaileNav {
  width: 7.8125rem;
  font-size: 0.75rem;
  height: 12.75rem;
  position: absolute;
  z-index: 999;
  top: 3.3125rem;
  right: 0.625rem;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 0.25rem;
  z-index: 998;
}
.detaileNav-div {
  width: 100%;
  height: 2.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.detaileNav-div div {
  width: 2rem;
  height: 2rem;
  display: flex;
}
.detaileNav-img {
  width: 1.2rem;
  height: 1.2rem;
  margin: auto;
  margin-left: 0.3125rem;
}
.detaileNav-title {
  width: 5.3125rem;
  font-size: 0.875rem;
  font-weight: 700;
  height: 2.5rem;
  line-height: 2.5rem;
  color: #fff;
  border-bottom: 0.0625rem solid #473636;
}

.detaile-top-center {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.detaile-top-center a {
  width: 2.8125rem;
  height: 2.75rem;
  text-align: center;
  line-height: 2.75rem;
  font-size: 0.875rem;
}

.detaile-swiper {
  width: 100%;
  height: 20rem;
  overflow: hidden;
}
.detaileSwiper {
  width: 100%;
  height: 100%;
}
.detaileSwiperImg {
  width: 100%;
  height: 100%;
}
.detaile-advertise {
  width: 100%;
  height: 2.6875rem;
}
.detaile-advertise img {
  width: 100%;
  height: 100%;
}
.detaile-price {
  width: 100%;
  height: 2.1875rem;
  margin-top: 0.625rem;
  display: flex;
  justify-content: space-between;
}

.detaile-price-right {
  width: 5rem;
}

.shopcart-main {
  text-align: center;
  height: 3.75rem;
  line-height: 3.75rem;
  font-size: 0.875rem;
  color: #333;
  background-color: #fff;
  border-radius: 0 0 0.625rem 0.625rem;
}
.shopcart-main-button {
  margin-left: 0.4375rem;
  width: 3.625rem;
  height: 1.875rem;
  line-height: 1.875rem;
  text-align: center;
  color: #fff;
  display: inline-block;
  background-color: rgb(252, 67, 36);
  border-radius: 0.9375rem;
}
.shopcart-main-denglu {
  padding: 4.375rem 0 4.0625rem;
  text-align: center;
  font-size: 0.75rem;
}
.shopcart-main-denglu-img {
  width: 5.625rem;
  height: 5.625rem;
  background-image: url(https://img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png);
  background-repeat: no-repeat;
  background-size: 100%;
  margin: auto;
}
.shopcart-main-denglu-txt {
  font-size: 1rem;
  color: #333;
  display: block;
  line-height: 1rem;
  margin-top: 1.1875rem;
}
.shopcart_mod_title {
  position: relative;
  margin: 0.9375rem 0;
  height: 0.75rem;
  line-height: 0.75rem;
  text-align: center;
  font-size: 0.75rem;
  color: #999;
}
.shopcart_mod_title_text {
  z-index: 2;
  position: relative;
  padding: 0 0.9375rem;
  background-color: #f2f2f2;
  position: relative;
  margin: 0.875rem 0;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: #999;
}
.shopcart_mod_title::before,
.shopcart_mod_title::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background-color: #ccc;
  height: 0.0625rem;

  left: 0.625rem;
  right: 0.625rem;
  top: 0.4375rem;
}
.shopcart_mod_title_text::before,
.shopcart_mod_title_text::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -0.125rem;
  width: 0.25rem;
  height: 0.25rem;
  background-color: #ccc;
  transform: rotate(45deg);
}

.shopcart_mod_title_text::before {
  left: 0;
}
.shopcart_mod_title_text::after {
  right: 0;
}
.kill {
  border-radius: 0.25rem 0 0 0.25rem;
  margin: 0 0 0.9375rem 0.9375rem;
  padding: 0;
  width: 19.0625rem;
  height: 10.75rem;
}
.kill-top {
  display: flex;
  height: 2.8125rem;
  line-height: 2.8125rem;
  font-size: 0.75rem;
}
.p-miaosha {
  font-size: 1rem;
  color: #333;
  margin: 0 0 0 0.9375rem;
  font-weight: 700;
  height: 2.8125rem;
  line-height: 2.8125rem;
}
.span-hours {
  color: #999;
  font-size: 0.75rem;
  height: 2.8125rem;
  line-height: 2.8125rem;
}
.timer {
  display: flex;
  align-items: center;
}
.timer span {
  flex: 1;
  width: 0.9375rem;
  height: 1.125rem;
  line-height: 1.125rem;
  text-align: center;
  position: relative;

  background-color: white;
  color: red;
}
.img-genduo {
  margin-left: 5.75rem;
  width: 0.9375rem;
  height: 0.9375rem;
}
.kill-content {
  position: relative;
  padding: 0 0.9375rem 0.9375rem;
  font-size: 0;
  font-family: none;
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
  width: 17.1875rem;
  height: 7rem;
}

.kill-li {
  position: relative;
  text-align: center;
  width: 24%;
  margin-right: 0.625rem;
  padding: 0 0.3125rem 0.3125rem;
  border-radius: 0.25rem;
  height: 6.6875rem;
}
.kill-img {
  width: 4.125rem;
  height: 4.125rem;
}
.kill-pNew {
  font-size: 1rem;
  font-weight: 400;
  margin-top: 0.3125rem;
  color: #f2270c;
}
.div-quanbutop {
  background: #fff;
  position: absolute;
  left: 55rem;
}
.div-quanbu {
  display: block;
  width: 2.1875rem;
  height: 6.6875rem;
  border-radius: 0.25rem;
  background-color: #f7f7f7;
}
.abcd {
  background-color: rgba(0, 0, 0, 0.3) !important;
}
.span-quanbu-img {
  width: 0.9375rem;
  height: 0.9375rem;
  position: absolute;
  top: 4.5625rem;
  left: 0.71875rem;
}
.span-quanbu {
  font-size: 0.75rem;
  color: #999;
  position: absolute;
  left: 1.15625rem;
  top: 2.53125rem;
  margin-top: -1.5625rem;
  padding-bottom: 0.75rem;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  text-align: left;
  letter-spacing: 0.125rem;
}

.floor4 {
  margin-top: 0.625rem;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 6.25rem;
}
.floor4-div {
  background: #fff;
  position: relative;
  float: left;
  width: 50%;

  padding: 0.9375rem 0.9375rem 0;
  box-sizing: border-box;
  border-radius: 0.625rem;
  margin: 0;
  font-size: 0.75rem;
  margin-bottom: 0.0625rem;
  height: 14.15625rem;
}
.floor4-div:nth-child(2n) {
  right: -0.0625rem;
}
.floor4-img {
  border-radius: 0;
}
.floor4img {
  width: 1.875rem;
  height: 1.5rem;
  background: url(../images/shopcart3.png) no-repeat 50%;
  background-size: 0.9375rem;
}
/* 展示层 */
.detaile-yixuan-van {
  width: 1.875rem;
  height: 1.5rem;
  background: url(../images/shopcart3.png) no-repeat 50%;
  background-size: 0.9375rem;
}
/* 已选弹出层 */
.detaile-select {
  width: 100%;
  height: 21.25rem;
  background-color: #fff;
  height: 21.25rem;
}
.select-top {
  width: 100%;
  height: 7.375rem;
  display: flex;
  padding-top: 1.125rem;
  padding-left: 0.625rem;
  position: relative;
}
.select-top-left {
  width: 6.25rem;
  height: 6.25rem;
  margin-right: 0.625rem;
}
.select-top-left img {
  width: 100%;
  height: 100%;
}
.select-top-right {
  width: 10.625rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.select-top-price {
  height: 2rem;
  color: #f2270c;
}
.price-priceSmall {
  font-size: 1.25rem;
}
.price-priceBig {
  font-size: 1.875rem;
  font-weight: 700;
}
.select-yixuan {
  height: 1.5625rem;
  font-size: 0.75rem;
  line-height: 1.5625rem;
  color: #333;
}
.select-yixuan-one {
  color: #8c8c8c;
  margin-right: 0.625rem;
}
.select-yixuan-two {
  margin-right: 0.625rem;
}
.xxx {
  width: 2rem;
  height: 2.75rem;
  position: absolute;
  top: 0;
  right: 0;
}
.xxx div {
  width: 1.25rem;
  height: 1.25rem;
  background-color: #f2f2f2;
  border-radius: 50%;
  position: absolute;
  bottom: 0.625rem;
  left: -0.625rem;
}
.xxx div img {
  width: 1.25rem;
  height: 1.25rem;
  margin: auto;
}
.select-top-middle {
  width: 100%;
  height: 13.75rem;
  margin-top: 1.25rem;
  overflow-y: auto;
}
.select-leibie {
  font-size: 0.8125rem;
  color: #262626;
  margin: 0 1.125rem;
  font-weight: 700;
  height: 2.5rem;
  line-height: 2.5rem;
}
.select-goodname {
  padding: 0 1rem;
  min-width: 1.25rem;
  max-width: 16.875rem;
  overflow: hidden;
  height: 1.875rem;
  line-height: 1.875rem;
  float: left;
  text-align: center;
  margin-left: 0.75rem;
  margin-bottom: 0.625rem;
  font-size: 0.6875rem;
  color: #262626;
  border: 0.0625rem solid #f2f2f2;
  background: #f2f2f2;
  border-radius: 0.9375rem;
}
.activeClass {
  padding: 0 1rem;
  min-width: 1.25rem;
  max-width: 16.875rem;
  overflow: hidden;
  line-height: 1.875rem;
  float: left;
  text-align: center;
  margin-left: 0.75rem;
  margin-bottom: 0.625rem;
  border-radius: 0.9375rem;
  background: #fcedeb;
  border: 0.0625rem solid #f2270c;
  font-size: 0.6875rem;
  color: #f2270c;
  font-weight: 700;
  height: 1.875rem;
}
.select-add {
  width: 100%;
  height: 1.875rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.625rem;
  margin-top: 1.25rem;
}
.select-shuliang {
  white-space: nowrap;
  width: 1.5625rem;
  font-size: 0.875rem;
  font-weight: 700;
  margin-left: 0.625rem;
}
.select-change {
  margin-right: 1.25rem;
  font: 1rem;
  display: flex;
}
.select-change span {
  width: 0.9375rem;
  height: 1.125rem;
  text-align: center;
  color: #262626;
}
span.select-num {
  width: 2.125rem;
  height: 1.125rem;
  text-align: center;
  line-height: 1.125rem;
  font-size: 0.75rem;
  background-color: #f2f2f2;
  margin: 0 0.3125rem;
}
.select-bottom {
  width: 100%;
  height: 3.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.select-bottom div {
  width: 8.6875rem;
  height: 2.375rem;
  border-radius: 2.375rem;
  margin-right: 0.625rem;
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 2.375rem;
  font-size: 0.875rem;
}
.select-bottom-add {
  background-color: #f23201;
}
.select-bottom-shop {
  background-color: #fac80d;
}
.toububox-bottom {
  width: 100%;
  height: 2.625rem;
  background-color: white;

  display: flex;
  justify-content: space-around;
}
.toububox-bottom-z {
  width: 15rem;
  height: 2.625rem;
  border-radius: 0 0 0 10px;
}
.toububox-bottom-z a {
  display: flex;
  height: 2.625rem;
  align-items: center;
}
.inputbox {
  margin: auto 0;
  font-size: 0.65rem;
  color: #262626;
  margin-left: 0.3125rem;
}

.inputbox input {
  outline: none;
  border: none;
  overflow: hidden;
  font-size: 0.65rem;
  color: #262626;
}

.toububox-bottom .toububox-bottom-z img {
  width: 0.75rem;
  height: 0.75rem;
  margin-left: 0.9375rem;
}
.toububox-bottom .toububox-bottom-z span {
  font-size: 0.75rem;
  line-height: 2.625rem;
}
.toububox-bottom .toububox-bottom-y {
  width: 5rem;
  height: 2.625rem;
  border-radius: 0 0 0.625rem 0;
}
.toububox-bottom .toububox-bottom-y span {
  display: block;
  width: 0.0625rem;
  height: 0.5rem;
  background-color: black;
  margin-top: 1.0625rem;
}
.toububox-bottom .toububox-bottom-y p {
  font-size: 0.75rem;
  margin-top: -0.75rem;
  margin-left: 0.9375rem;
}

.spxq {
  width: 100%;
  height: 10.8125rem;
  overflow: auto;
}
.spxq-box {
  width: 100%;
  height: 10.1875rem;
  background-color: white;
  margin-top: 0.625rem;
  border-radius: 0.625rem;
}
.spxq-box-top {
  width: 100%;
  height: 1.75rem;
  background-color: white;
  display: flex;
  border-radius: 0.625rem 0.625rem 0 0;
}
.spxq-box-top-z {
  width: 15rem;
  height: 1.75rem;
}
.spxq-box-top-z input[type="checkbox"] {
  width: 0.9375rem;
  height: 0.9375rem;
  margin-left: 0.9375rem;
}
.spxq-box-top-z span {
  display: inline-block;
  font-size: 0.75rem;
  margin-top: 0.4375rem;
}
.spxq-box-top-y {
  width: 5rem;
  height: 1.75rem;
  overflow: auto;
}
.spxq-box-top-y p {
  width: 2.875rem;
  height: 1.0625rem;
  font-size: 0.75rem;
  background-color: white;
  line-height: 1.0625rem;
  text-align: center;
  border-radius: 0.3125rem;
  margin-top: 0.34375rem;
  margin-left: 1.0625rem;
}
.spxq-box-bottom {
  width: 100%;
  height: 8.4375rem;
  background-color: white;
  overflow: auto;
  display: flex;
}
.spxq-box-bottom-z {
  width: 2.6875rem;
  height: 6.75rem;
  margin-top: 0.625rem;
}
.spxq-box-bottom-z input[type="checkbox"] {
  width: 0.9375rem;
  height: 0.9375rem;
  margin-top: 2.75rem;
  margin-left: 0.71875rem;
}
.spxq-box-bottom-mind {
  width: 5.3125rem;
  height: 6.75rem;
  margin-top: 0.625rem;
}
.spxq-box-bottom-mind img {
  width: 5.3125rem;
  height: 5.3125rem;
  margin-top: 0.71875rem;
}
.spxq-box-bottom-y {
  width: 12rem;
  height: 6.75rem;
  margin-top: 0.625rem;
}
.spxq-box-bottom-y-top {
  width: 10.75rem;
  height: 3.4375rem;
  margin: auto;
  margin-top: 0.6875rem;
}
.spxq-box-bottom-y-top p {
  font-size: 0.75rem;
  margin-left: 0.125rem;
  margin-top: 0.125rem;
}

.bjs {
  width: 10rem;
  height: 0.8125rem;

  border-radius: 0.5rem;
}
.spxq-box-bottom-y-mind {
  width: 10.75rem;
  height: 1.4375rem;
  margin: auto;
  display: flex;
}
.z {
  width: 6.25rem;
  height: 1.4375rem;
}

.z p {
  font-size: 0.75rem;
  line-height: 1.4375rem;
}
.y {
  width: 4.5rem;
  height: 1.4375rem;
  display: flex;
  justify-content: space-around;
}

.y p {
  font-size: 0.75rem;
  line-height: 1.4375rem;
}

.y img {
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.34375rem;
}
.spxq-box-bottom-y-bottom {
  width: 10.75rem;
  height: 1.1875rem;
  margin: auto;
  overflow: auto;
  display: flex;
  justify-content: flex-end;
}

.spxq-box-bottom-y-bottom-z {
  width: 4.25rem;
  height: 0.875rem;
  border-right: 0.0625rem solid;
  margin-top: 0.15625rem;
}

.spxq-box-bottom-y-bottom-z p {
  font-size: 0.75rem;
  line-height: 0.875rem;
}

.spxq-box-bottom-y-bottom-y {
  width: 2.5rem;
  height: 0.875rem;
}

.spxq-box-bottom-y-bottom-y p {
  font-size: 0.75rem;
  line-height: 0.875rem;
  margin-top: 0.15625rem;
  margin-left: 0.625rem;
}

.backTop {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  border: 0.00625rem solid #c5c5c5;
  position: fixed;
  right: 0.625rem;
  bottom: 6.875rem;
  display: flex;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: -1;
}
.backTop img {
  width: 70%;
  height: 70%;
  margin: auto;
  border-radius: 50%;
}
.active2 {
  opacity: 1;
  color: #fff;
}
</style>
<style >
.abcd {
  background-color: rgba(0, 0, 0, 0.03) !important;
}
</style>
